<script setup lang="ts">
import { followUser, searchUserList } from '@/api/user';
import { User } from '@/api/user/type';
import { router } from '@/router';
import { onMounted, ref } from 'vue';
import { showNotify } from 'vant';

const keyword = ref('');
const loading = ref(true);
const userList = ref([] as User[]);
const finished = ref(true);

onMounted(() => {
    onSearch('');
})

const onSearch = async (value: string) => {
    loading.value = true;
    finished.value = false;
    
    try {
        const res = await searchUserList(value);
        userList.value = res.data as User[];
    } catch (error) {
        console.error('搜索用户失败:', error);
        showNotify({
            type: 'danger',
            message: '搜索用户失败',
            position: 'top'
        });
    } finally {
        loading.value = false;
        finished.value = true;
    }
}

const onFollow = async (userId: string, event: Event) => {
    event.stopPropagation();
    
    try {
        await followUser(userId);
        showNotify({
            type: 'success',
            message: '关注成功',
            position: 'top'
        });
    } catch (error) {
        console.error('关注失败:', error);
        showNotify({
            type: 'danger',
            message: '关注失败',
            position: 'top'
        });
    }
}

const toUserProfile = (userId: string) => {
    router.push({
        name: "UserIndex",
        query: {
            "id": userId
        }
    });
}

const goBack = () => {
    router.back();
}
</script>

<template>
    <div class="user-search-page">
        <!-- 头部 -->
        <div class="search-header">
            <div class="back-button" @click="goBack">
                <van-icon name="arrow-left" />
            </div>
            
            <div class="search-input-container">
                <van-search
                    v-model="keyword"
                    placeholder="搜索用户名或ID"
                    @search="onSearch"
                    show-action
                    background="transparent"
                    shape="round"
                >
                    <template #action>
                        <button class="search-button" @click="onSearch(keyword)">搜索</button>
                    </template>
                </van-search>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="search-content">
            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
                <van-loading type="spinner" vertical>搜索中...</van-loading>
            </div>
            
            <!-- 无结果 -->
            <div v-else-if="userList.length === 0" class="empty-result">
                <van-empty image="search" description="未找到相关用户">
                    <template #default>
                        <p class="empty-tip">尝试使用其他关键词搜索</p>
                    </template>
                </van-empty>
            </div>
            
            <!-- 搜索结果列表 -->
            <div v-else class="user-list">
                <div 
                    v-for="user in userList" 
                    :key="user.id"
                    class="user-card"
                    @click="toUserProfile(user.id)"
                >
                    <div class="user-info">
                        <div class="user-avatar">
                            <van-image 
                                :src="user.avatar" 
                                round 
                                width="48" 
                                height="48"
                                fit="cover"
                            />
                        </div>
                        <div class="user-details">
                            <div class="user-name">
                                {{ user.nickname }}
                            </div>
                            <div class="user-id">
                                ID：{{ user.id.substring(0, 8) }}...
                            </div>
                        </div>
                    </div>
                    
                    <div class="user-actions">
                        <van-button 
                            round 
                            size="small" 
                            type="primary" 
                            icon="plus" 
                            plain
                            @click="onFollow(user.id, $event)"
                        >
                            关注
                        </van-button>
                        <van-button 
                            round 
                            size="small" 
                            type="primary"
                            icon="chat-o"
                            plain
                            @click.stop="router.push({ name: 'MessageChat', query: { receiverId: user.id }})"
                        >
                            发消息
                        </van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.user-search-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 108px);
    background-color: #f7f8fa;
    
    .search-header {
        padding: 16px;
        background-color: white;
        display: flex;
        align-items: center;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        
        .back-button {
            margin-right: 12px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            
            &:hover {
                background-color: #f2f3f5;
            }
            
            .van-icon {
                font-size: 20px;
            }
        }
        
        .search-input-container {
            flex: 1;
            
            .van-search {
                padding: 0;
            }
            
            .search-button {
                padding: 0 16px;
                margin-left: 8px;
                font-size: 14px;
                color: #1989fa;
                background: none;
                border: none;
                cursor: pointer;
                
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    
    .search-content {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        
        .loading-container,
        .empty-result {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            
            .empty-tip {
                margin-top: 16px;
                color: #969799;
                font-size: 14px;
            }
        }
        
        .user-list {
            max-width: 800px;
            margin: 0 auto;
            
            .user-card {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px;
                background-color: white;
                border-radius: 8px;
                margin-bottom: 12px;
                cursor: pointer;
                transition: all 0.2s;
                
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                }
                
                .user-info {
                    display: flex;
                    align-items: center;
                    
                    .user-avatar {
                        margin-right: 16px;
                    }
                    
                    .user-details {
                        .user-name {
                            font-weight: 500;
                            font-size: 16px;
                            margin-bottom: 4px;
                        }
                        
                        .user-id {
                            font-size: 13px;
                            color: #969799;
                        }
                    }
                }
                
                .user-actions {
                    display: flex;
                    gap: 8px;
                }
            }
        }
    }
}
</style>